import './App.css';
import State from './components/State';
import Effect from './components/Effect';
import Swiper from './components/Swiper';
import Cont from './components/Cont';
import Grand from './components2/Grand';
import Dic from './components3/Dic';
import One from './components3/One';

import { Link, Route, NavLink, Switch, Redirect } from 'react-router-dom'

import Home from './pages/Home'
import About from './pages/About'
import Homes from './pages/Homes';


function App() {
  return (
    <div className="App">
      {/* <State/> */}
      {/* <Effect/> */}
      {/* <Swiper/> */}
      {/* <Cont/> */}
      {/* <Grand/> */}
      {/* <Dic/>
      <One/> */}

      {/* <NavLink to="/home">首页</NavLink>
      <NavLink to="/about">测试</NavLink> */}


      {/* <Route path="/home" component = { Home }/> */}
      {/* render说明必须是一个函数 */}
      {/* 
      <Route path="/home" render={() => {
        return <div>
          <h3>标题</h3>
          <Home/>
        </div>
      }}/> */}

      {/* <Route path="/home">
        <Home/>
      </Route>

      <Route path="/about" component = { About }/> */}




      {/* exact精准匹配 */}

      {/* <NavLink exact to="/home">首页--</NavLink>
      <NavLink exact to="/about">测试--</NavLink>
      <NavLink exact to="/home/homes">homes--</NavLink>


      <Route exact path="/home" component = { Home }/>
      <Route exact path="/about" component = { About }/>
      <Route exact path="/home/homes" component = { Homes }/> */}



      {/* Switch  匹配到一个后终止执行 */}
        <NavLink exact to="/home">首页--</NavLink>
        <NavLink to="/about">测试--</NavLink>
        <NavLink  to="/home/homes">homes--</NavLink>

      <Switch>
        {/* 组件，里面的内容是 Route */}
        <Route path="/home/homes" component={Homes} />
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
      </Switch>


      <Redirect to="/home"  from="/"/>

    </div>
  );
}


export default App;
